@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes goUp {
    from {
        top: 0;
        left: 30px;
        transform: scale(1.0);
    }
    to {
        top:-290px;
        left:1330px;
        transform: scale(1.3);
    }
}

.cloud{
    background: url("../img/c.jpg");
    animation: cloud 40s linear infinite;
    position: absolute;
    display: flex;
}
@keyframes cloud {
    from{background-position: 0% 0%}
    to{background-position: -50% 0%}
}

.board{
    opacity: 0.0;
}

#rope1{
    height: 270px;
    content: url("../img/rope.png");
    position: absolute;
    top: 0px;
    left: 85px;
}
#rope2{
    height: 270px;
    content: url("../img/rope.png");
    position: absolute;
    top: 0px;
    left: 265px;
}
#rope3{
    height: 270px;
    content: url("../img/rope.png");
    position: absolute;
    top: 0px;
    left: 445px;
}
#rope4{
    height: 400px;
    content: url("../img/rope.png");
    position: absolute;
    top: 0px;
    left: 170px;
}
#rope5{
    height: 400px;
    content: url("../img/rope.png");
    position: absolute;
    top: 0px;
    left: 365px;
}

#ropes1{
    height: 410px;
    content: url("../img/rope.png");
    position: absolute;
    top: 0px;
    left: 10px;
}
#ropes2{
    height: 410px;
    content: url("../img/rope.png");
    position: absolute;
    top: 0px;
    left: 510px;
}
#seat1{
    height: 20px;
    width: 500px;
    content: url("../img/seats.png");
    position: absolute;
    top: 270px;
    left: 20px;
}
#seat2{
    height: 20px;
    width: 500px;
    content: url("../img/seats.png");
    position: absolute;
    top: 400px;
    left: 20px;
}

#wukong{
    content: url("../img/wukong.png");
    height: 300px;
    position: absolute;
    top: 0px;
    left: 600px;
}

#num_input{
    position: absolute;
    top: 20px;
    left: 860px;
    width: 70px;
}
#num_button{
    position: absolute;
    top: 50px;
    left: 860px;
    width: 75px;
}
#choose{
    content: url("../img/qipao.png");
    height: 100px;
    width: 200px;
    position: absolute;
    top: 0px;
    left: 800px;
}

#gameBoard{
    width: 1500px;
    height: 940px;
    position: absolute;
    margin: 0 auto;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#grassBoard{
    position: absolute;
    bottom: 50px;
    width: 1500px;
    height: 430px;
}

#monkeysBoard{
    z-index: 3;
    position: absolute;
    top: 80px;
    left: 0;
}

.monkey{
    position: absolute;
    top: 10px;
}

.trash{
    position: absolute;
    top: 335px;
    left: 10px;
}

#rays	{ /* 表现动画效果 */
    position: absolute;
    top: -210px;
    left: -230px;
    z-index: 0;

    /* microsoft ie */
    animation-name: spin;
    animation-duration: 5000ms; /* 40 seconds */
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    transform-origin: 50% 50%;
}

.goToMountain {
    /* microsoft ie */
    animation-name: goUp;
    animation-duration: 3000ms; /* 40 seconds */
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}


